<template>
	<view class="share">
		<view class="content">
			<!-- <image :src="img" class="img"></image> -->
			<!-- <r-canvas ref="rCanvas"></r-canvas> -->
			<r-canvas ref="rCanvas"></r-canvas>
			<view class="btn" @click="btnClick">保存到相册</view>
			<!-- <r-canvas ref="rCanvas"></r-canvas> -->
		</view>
	</view>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue";

	export default {
		components: {
			rCanvas,
		},
		data() {
			return {
				img: 'https://oss.youkutongcheng.com/test/ee29eaa87cd0db6352a0c3e00cb7248.jpg',

				canvasImages: "",
				canvasWidth: 750, // 宽度
				canvasHeight: 1348, // 高度
				shareTitle: "", // 分享标题
				goodsTitle: "", // 商品宣传标题
				shareImage: "", // 背景图片
				qrSize: 300, // 二维码大小
				qrUrl: "https://h5.wwmart.cn/pages/user/register/register", // 生成二维码的链接
				invatecode: "",
				qrcode: "",
				showShare: false,
				productId: 100018,
				productPic: "",
				productDetail: "",
				productTime: "",
				productPrice: 0,
				productName: "",
				tempFilePath: '',
			}
		},
		onShow() {
			// this.init()
		},
		onLoad() {
			this.createQRCode();
		},
		methods: {
			btnClick() {
				this.$refs.rCanvas.saveImage(this.tempFilePath);
				uni.showToast({
					title: "图片已保存至相册",
					icon: "none",
				});
			},
			createQRCode() {
				this.$http('generalize.getUserWxCode', {
					token: this.$tools.getToken(),
				}).then(res => {

					if (res.code == 200) {
						this.qrcode = res.msg
						this.createImage()
					}
					// this.createImage();
				})
			},
			createImage() {
				this.$nextTick(async () => {
					// 初始化
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas",
						canvas_width: 375,
						canvas_height: 667,
						// scale: 1,
						hidden: false,
						background_color: "rgb(10,10,10)",
					});

					// 画图
					await this.$refs.rCanvas
						.drawImage({
							url: this.img,
							x: 0,
							y: 0,
							w: 375,
							h: 667,
						})
						.catch((err_msg) => {
							uni.showToast({
								title: err_msg,
								icon: "none",
							});
						});
					// 画图
					await this.$refs.rCanvas
						.drawImage({
							url: this.qrcode,
							x: 130,
							y: 380,
							w: 112,
							h: 112,
							border_radius: 5,
						})
						.catch((err_msg) => {
							uni.showToast({
								title: err_msg,
								icon: "none",
							});
						});
					// 生成海报
					// await this.$refs.rCanvas.draw();

					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						console.log('生成海报 res', res)
						//res.tempFilePath：生成成功，返回base64图片
						// 保存图片
						this.tempFilePath = res.tempFilePath
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.share {}

	.content {
		// margin-top: 32rpx;
		// padding: 0 34rpx;
		height: 760rpx;
		width: 760rpx;


	}

	.btn {
		background: linear-gradient(128.5deg, #fae568 0%, #ffc82f 100%), linear-gradient(135.25deg, #f8dc59 0%, #f6bc57 100%), #cccccc;
		font-size: 32rpx;
		width: 690rpx;
		height: 90rpx;
		text-align: center;
		border-radius: 50rpx;
		line-height: 90rpx;
		margin: 64rpx auto;
	}
</style>
